<template>
    <div>
        <el-button type="primary" @click="dialogVisible = true">添加</el-button>
        <el-dialog v-model="dialogVisible" title="创建链上账户" width="30%">
            <el-form :model="newAccountInfo" label-width="120px">
                <el-form-item label="链名称">
                    <el-radio-group v-model="newAccountInfo.chainName">
                        <el-radio label="dwbc001">dwbc001</el-radio>
                        <el-radio label="dwbc002">dwbc002</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input type="password" v-model="newAccountInfo.pwd" />
                </el-form-item>
                <el-form-item label="重复密码">
                    <el-input type="password" v-model="newAccountInfo.repeatPwd" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="createChainAccount">创建</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
    <div style="width: 650px">
        <el-table :data="list">
            <el-table-column label="地址" prop="chainAccount" width="400px" />
            <el-table-column label="链名" prop="chainName" />
            <el-table-column label="余额" prop="balance" />
        </el-table>
    </div>
</template>

<script>
import cookie from 'js-cookie'
import { getAccounts, newAccount } from '@/http/api/chain'

export default {
    name: 'ChainAccount',
    data() {
        return {
            username: '',
            dialogVisible: false,
            list: [],
            newAccountInfo: {
                chainName: 'dwbc001',
                pwd: '',
                repeatPwd: ''
            }
        }
    },
    methods: {
        async createChainAccount() {
            if (this.newAccountInfo.pwd !== this.newAccountInfo.repeatPwd) {
                this.$message.warning('两次输入密码不一致')
                return
            }
            let res = await newAccount({
                chainName: this.newAccountInfo.chainName,
                pwd: this.newAccountInfo.pwd,
                username: this.username
            })

            if (res.code !== 0) {
                this.$message.warning(res.msg)
                return
            }

            this.$message.success('创建成功')
            this.newAccountInfo.chainName = ''
            this.newAccountInfo.pwd = ''
            this.newAccountInfo.repeatPwd = ''

            res = await getAccounts({
                username: this.username
            })
            if (res.code !== 0) {
                this.$message.warning(res.msg)
                return
            }
            this.list = res.data
        }
    },
    async mounted() {
        this.username = cookie.get('username')
        let res = await getAccounts({
            username: this.username
        })
        if (res.code !== 0) {
            this.$message.warning(res.msg)
            return
        }
        this.list = res.data
    }
}
</script>